<!--
 * FilePath     : \src\views\home\index.vue
 * Author       : SJZ
 * Date         : 2025-03-12 19:28
 * LastEditors  : SJZ
 * LastEditTime : 2025-04-08 21:37
 * Description  : 首页
 * CodeIterationRecord: 
 -->

<template>
  <div class="home">
    <el-carousel class="home-carousel" trigger="click" :interval="4000" height="800px" :motion-blur="true">
      <el-carousel-item v-for="(imageSrc, index) in carouselImages" :key="index">
        <img class="wh-full" :src="imageSrc" />
      </el-carousel-item>
    </el-carousel>
    <hot-sale-brand class="fade-in" :hotSaleBrands="hotSaleBrands" />
    <company-introduction class="fade-in" />
    <service class="fade-in" :services="services" />
    <choose-us class="fade-in" :data="chooseUsData" />
    <hot-sale-molde class="fade-in" :hotSaleMoldes="hotSaleMoldes" />
    <customer-review class="fade-in" :customerReviews="customerReviews" />
    <latest-new class="fade-in" :latestNews="latestNews" />
    <div class="aline-start mt-50 px-10% box-border bg-#037CE5 c-#ffffff">
      <div>
        <h2>Get Your Dream Car lt's Simple And Affordable</h2>
        <p>
          Henan Dongdong Automobile Service Co., Ltd, the leading wholesaler and distributor
          <br />of electric vehicles in China
        </p>
      </div>
      <div class="bg-#ffffff theme-color-primaryFontColor ml-15% mt-50 mb-50 py-10 px-20 cursor-pointer">INQUIRY NOW</div>
      <a class="ml-5% c-#ffffff" href="mailto:sales@ddongauto.com">sales@ddongauto.com</a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import hotSaleBrand from "./components/hotSaleBrand.vue";
import companyIntroduction from "./components/companyIntroduction.vue";
import service from "./components/service.vue";
import chooseUs from "./components/chooseUs.vue";
import hotSaleMolde from "./components/hotSaleMolde.vue";
import customerReview from "./components/customerReview.vue";
import latestNew from "./components/latestNew.vue";

onMounted(() => {
  const fadeElements = document.querySelectorAll(".fade-in");
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          // 动画完成后停止观察
          observer.unobserve(entry.target);
        }
      });
    },
    {
      threshold: 0.15 // 当元素10%进入视口时触发
    }
  );

  fadeElements.forEach((element) => {
    observer.observe(element);
  });
});
const carouselImages = ref<string[]>([]);
homeService.getCarouselImages().then((images: string[]) => {
  carouselImages.value = images;
});
const hotSaleBrands = ref<Record<string, string>[]>([]);
homeService.getHotSaleBrands().then((data: Record<string, string>[]) => {
  hotSaleBrands.value = data;
});
const services = ref<Record<string, string>[]>([]);
homeService.getServices().then((data: Record<string, string>[]) => {
  services.value = data;
});
const chooseUsData = ref<Record<string, string | Record<string, any>>>({});
homeService.getChooseUsData().then((data: Record<string, string | Record<string, any>>) => {
  chooseUsData.value = data;
});
const hotSaleMoldes = ref<Record<string, any>[]>([]);
homeService.getHotSaleMoldes().then((data: Record<string, any>[]) => {
  hotSaleMoldes.value = data;
});
const customerReviews = ref<Record<string, any>[]>([]);
homeService.getCustomerReviews().then((data: Record<string, any>[]) => {
  customerReviews.value = data;
});
const latestNews = ref<Record<string, any>[]>([]);
homeService.getLatestNews().then((data: Record<string, any>[]) => {
  latestNews.value = data;
});
</script>

<style lang="scss" scoped>
.home {
  .fade-in {
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;

    &.visible {
      opacity: 1;
      animation: fadeIn 1s ease forwards;
    }
  }
  /* 定义淡入动画 */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(50px); /* 从下方 20px 处开始 */
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .home-carousel.el-carousel {
    :deep(.el-carousel__arrow) {
      width: 64px;
      height: 64px;
      &.el-carousel__arrow--left {
        left: 150px;
      }
      &.el-carousel__arrow--right {
        right: 150px;
      }
      i {
        font-size: 3em;
      }
    }
  }
}
</style>
